<template>
  	<section class="header text-center">
      <div>
<!--        <Button @click.native="change('cn')">{{$t('m.chinese')}}</Button>-->
<!--        <Button @click.native="change('en')">{{$t('m.english')}}</Button>-->
      </div>
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">{{$t('m.home')}} <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.shop')}} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.women')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.men')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.girl')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.boy')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.pages')}} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.pagesdict.homepage')}}</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">{{$t('m.pagesdict.catalog')}}</a>
								<a class="dropdown-item" href="item.html">{{$t('m.pagesdict.itemdetail')}}</a>
								<a class="dropdown-item" href="cart.html">{{$t('m.pagesdict.cart')}}</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">{{$t('m.pagesdict.contact')}}</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.pagesdict.contact')}}</a></li>
					<li class="nav-item dropdown">

            <!--检索功能-->
            <Search @search="search" v-model="text"></Search>


          </li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>

								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
			</div>
      <div>

        <div v-if="username==''">

          <router-link to="/login">登录</router-link>
          <router-link to="/register">注册</router-link>


          <router-link to='/register'><Button>{{$t('m.register')}}</Button></router-link>
          <router-link to='/login'><Button>{{$t('m.login')}}</Button></router-link>

        </div>

        <div v-else>
          {{$t('m.welcome')}}：<router-link to='/myprofile'>{{this.username}}</router-link>

          <router-link to='/login'><Button>{{$t('m.login')}}</Button></router-link>

          欢迎您：<router-link to="/myprofile">{{username}}</router-link>
          &nbsp;&nbsp;
          <a href="#" @click="logout">登出</a>

          &nbsp;&nbsp;
          <a href="/addgoods">添加商品</a>

        </div>


      </div>

      <!--国际化语言开关-->
      <h-switch v-model="lang" @change="lang_change">中/英</h-switch>



		</nav>
	</section>



</template>

<script>
  import {config,formatXml} from "../config";

  export default {
  data() {
    return {
      msg: "这是一个变量",
      username:'',

      //语言变量
      lang:false,
      //检索关键字
      text:''
    }
  },
  mounted: function () {

      //获取钉钉id
      var ding_nick = this.$route.query.ding_nick;

      // 获取微博id
      var sina_id = this.$route.query.sina_id;
      var uid = this.$route.query.uid;

      // console.log(sina_id);

      if (ding_nick){
        //钉钉id存储
        localStorage.setItem('username',ding_nick)
      }

      if (sina_id){

        //自动登录
        localStorage.setItem("username",sina_id);
        localStorage.setItem("uid",uid);



      }

    //判断用户是否登录
    let uname = localStorage.getItem('username');

    if (uname==null){

      //说明未登录或者已登出
      this.username = '';
    }else {
      this.username = uname;
    }
    //自动判断语言
    // console.log(navigator.language);
    // if (navigator.language == 'zh-CN'){

    //   this.$i18n.locale = 'zh';

    // }else {
    //   this.$i18n.locale = 'en';
    // }

    //判断语言选择
    this.$i18n.locale = localStorage.getItem('lang');
    if (this.$i18n.locale == 'zh'){
      this.lang = 0;
    }else {
      this.lang = 1;
    }


  },
  methods:{

    //检索逻辑
    search:function(){

      console.log(this.text);

      //跳转
      this.$router.push({'path':'/search',query:{word:this.text}});


    },

    //语言切换事件
    lang_change:function() {
      console.log(this.lang);

      //判断语言
      if (this.lang == true){

        //英文
        this.$i18n.locale = 'en';
        localStorage.setItem('lang','en');
      }else{

        //单选
        this.$i18n.locale = 'zh';
        localStorage.setItem('lang','zh')


      }


    },




    //登出
    logout:function () {

      //删除对应的localstorage  clear()可以全部删除
      localStorage.removeItem("username");

      //跳转
      this.username = '';
      this.$router.push('/login');




    },
    //切换中英文
    // change(type){
    //   //修改显示语言
    //   this.$i18n.locale = type
    // }


  }
}
</script>

<style scoped>

</style>
